<template>
  <div class="app-container">
    <el-card style="margin-bottom: 20px">
      <el-row>
        <el-col :span="24">
          <h5 style="display: inline-block;margin: 0 0 7px;">业主信息</h5>
          <div style="float: right;">
            <el-button type="success" @click="checkOwnerPop" icon="el-icon-search">选择业主</el-button>
            <el-button type="primary" @click="openDddOwnerPop" v-if="owner.id !== undefined" icon="el-icon-plus">添加成员</el-button>
<!--            选择业主弹窗-->
            <el-dialog title="选择业主" :visible.sync="openCheckOwnerPop">
              <el-form ref="queryForm" :model="listQuery" :inline="true" label-width="68px">
                <el-form-item label="业主名称" prop="name">
                  <el-input
                    v-model="listQuery.name"
                    placeholder="(选填)请输入业主名称"
                    clearable
                    size="small"
                    style="width:180px"
                  />
                </el-form-item>
                <el-form-item label="手机号" prop="link">
                  <el-input
                    v-model="listQuery.link"
                    placeholder="(选填)请输入业主手机号"
                    clearable
                    size="small"
                    style="width:200px"
                  />
                </el-form-item>
                <el-form-item label="身份证" prop="idCard" >
                  <el-input
                    v-model="listQuery.idCard"
                    placeholder="(选填)请输入业主身份证"
                    clearable
                    size="small"
                    style="width:200px"
                  />
                </el-form-item>
              </el-form>
              <el-table :data="getOwnersList">
                <el-table-column label="业主名称"align="center" >
                  <template slot-scope="scope">
                    <span>{{ scope.row.name}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="手机号" align="center" >
                  <template slot-scope="scope">
                    <span>{{ scope.row.link }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="性别" width="80px" align="center" >
                  <template slot-scope="scope">
                    <el-tag :type="scope.row.sex === 1 ? '' : 'warning'" disable-transitions>{{scope.row.sex===1 ? '男':'女'}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="年龄" width="110px" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.age }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="身份证号码" width="200px" align="center">
                  <template slot-scope="scope">
                    <span style="color:red;">{{ scope.row.idCard }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" class-name="small-padding fixed-width" width="140" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" @click="checkOwner(scope.row)">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>
<!--            选择业主弹窗 end-->

<!--            添加成员弹窗-->
            <el-dialog
              title="添加业主"
              :visible.sync="addOwnerPop"
              width="30%">
              <AddOwner :ownerFamily="ownerFamily"/>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOwnerFamilys">确 定</el-button>
              </span>
            </el-dialog>
<!--            添加成员弹窗 end-->
          </div>
          <el-divider></el-divider>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3" style="padding-right: 10px">
          <el-image style="width: 100%; height: 100%" :src="owner.avatar" fit="['fill', 'contain', 'cover', 'none', 'scale-down']"></el-image>
        </el-col>
        <el-col :span="21" style="padding-top: 20px">
          <el-row style="padding-left: 10px;padding-right: 50px;padding-bottom: 40px">
            <el-col :span="6">
              <span class="zitiyangshi">业主ID:</span> <span class="neirong">{{owner.id}}</span>
            </el-col>
            <el-col :span="6">
              <span class="zitiyangshi">业主名称:</span> <span class="neirong">{{ owner.name }}</span>
            </el-col>
            <el-col :span="6">
              <span class="zitiyangshi">性别:</span> <span class="neirong">{{ owner.sex===1 ? '男':'女' }}</span>
            </el-col>
            <el-col :span="6">
              <span class="zitiyangshi">年龄:</span> <span class="neirong">{{ owner.age }}</span> 岁
            </el-col>
          </el-row>
          <el-row style="padding-left: 10px;padding-right: 50px;">
            <el-col :span="6">
              <span class="zitiyangshi">手机号:</span> <span class="neirong">{{ owner.link}}</span>
            </el-col>
            <el-col :span="6">
              <span class="zitiyangshi">身份证号:</span> <span class="neirong">{{ owner.idCard |idCard }}</span>
            </el-col>
            <el-col :span="6">
              <span class="zitiyangshi">备注:</span> <span class="neirong">{{ owner.remark }}</span>
            </el-col>
            <el-col :span="6">
              <span class="zitiyangshi">业主注册时间:</span> <span class="neirong">{{ owner.createTime}}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-table
        :data="ownerFamilyList"
        style="width: 100%">
        <el-table-column
          fixed
          prop="id"
          label="编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column label="性别" width="80px" align="center" >
          <template slot-scope="scope">
            <el-tag :type="scope.row.sex === 1 ? '' : 'warning'" disable-transitions>{{scope.row.sex===1 ? '男':'女'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="年龄" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.age }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ownerTypeCd"
          label="类型" >
          <template slot-scope="scope">
            <span>{{ scope.row.ownerTypeCd === '1002'? '家庭成员':'其他' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="link"
          label="联系电话" >
        </el-table-column>
        <el-table-column
          prop="idCard"
          label="身份证号" >
        </el-table-column>
        <el-table-column label="操作" class-name="small-padding fixed-width" width="140" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="openOwnerFamilyPop(scope.row)">修改</el-button>

            <el-button type="text" @click="delOwnerFamily(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--    数据表格 end-->
    <el-dialog
      title="修改业主"
      :visible.sync="updateOwnerPop"
      width="30%">
      <AddOwner :ownerFamily="ownerFamily"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateOwnerPop = false">取 消</el-button>
        <el-button type="primary" @click="updateOwnerFamily">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AddOwner from './page/addOwner'
import {queryOwnerList, getOwnerFamily, addOwnerFamily, deleteOwner, updateOwner} from '@/api/village/owner'
export default {
  name: "index",
  components: {AddOwner},
  data(){
    return{
      // 打开选择业主的弹窗
      openCheckOwnerPop : false,
      // 查询条件
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        link: undefined,
        idCard: undefined,
      },
      // 业主信息
      owner:{
        id:undefined,
        name:undefined,
        sex:undefined,
        age:undefined,
        avatar:'',
        link:undefined,
        remark:undefined,
        idCard:undefined
      },
      // 成员集合
      ownerFamilyList:[],
      // 业主集合
      getOwnersList:[],
      // 打开新增用户弹窗
      addOwnerPop:false,
      // 打开修改成员的弹窗
      updateOwnerPop :false,
      // 成员信息
      ownerFamily:{
        id:undefined,
        ownerId:undefined,
        name:undefined,
        sex:undefined,
        age:undefined,
        avatar:'',
        link:undefined,
        idCard:undefined,
        ownerTypeCd:undefined
      },
    }
  },
  methods: {
    /**
     * 修改成员信息
     */
    updateOwnerFamily(){
      const owner = {
        id:this.ownerFamily.id,
        avatar:this.ownerFamily.avatar,
        ownerId:this.ownerFamily.ownerId,
        name:this.ownerFamily.name,
        sex:this.ownerFamily.sex,
        age:this.ownerFamily.age,
        link:this.ownerFamily.link,
        idCard:this.ownerFamily.idCard,
        ownerTypeCd:this.ownerFamily.ownerTypeCd
      }
      updateOwner(owner).then(res => {
        if (res.data){
          this.updateOwnerPop = false
          this.ownerFamily={
            id:undefined,
            ownerId:undefined,
            name:undefined,
            sex:undefined,
            age:undefined,
            avatar:'',
            link:undefined,
            idCard:undefined,
            ownerTypeCd:undefined
          }
          this.getList()
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    /**
     * 打开添加成员窗体
     */
    openOwnerFamilyPop(owner){
      this.updateOwnerPop = true
      this.ownerFamily = owner
    },
    /**
     * 删除业主成员
     */
    delOwnerFamily(id){
      this.$confirm('确定要删除此业主成员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除业主成员
        deleteOwner(id).then(res => {
          if(res.data){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getOwnerFamilyList(this.owner.id)
          }else{
            this.$message.error(res.msg)
          }
          return false;
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /**
     * 添加业主成员
     */
    addOwnerFamilys(){
      const ownerFamily = {
        ownerId:this.ownerFamily.ownerId,
        name:this.ownerFamily.name,
        sex:this.ownerFamily.sex,
        age:this.ownerFamily.age,
        file:this.ownerFamily.avatar,
        link:this.ownerFamily.link,
        idCard:this.ownerFamily.idCard,
        ownerTypeCd:this.ownerFamily.ownerTypeCd
      }
      addOwnerFamily(ownerFamily).then(res => {
        if(res.data){
          this.addOwnerPop = false
          this.getOwnerFamilyList(this.owner.id)
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.ownerFamily = {
            ownerId:undefined,
            name:undefined,
            sex:undefined,
            age:undefined,
            avatar:'',
            link:undefined,
            idCard:undefined,
            ownerTypeCd:undefined
          }
        }
      })
    },

    /**
     * 打开选择成员的弹窗
     */
    openDddOwnerPop(){
      this.addOwnerPop = true
    },

    /**
     * 选择数据
     */
    checkOwner(owner){
      this.openCheckOwnerPop = false
      this.owner = owner
      this.ownerFamily.ownerId = owner.id
      this.getOwnerFamilyList(owner.id)
    },

    /**
     * 打开选择弹出框,初始化数据
     */
    checkOwnerPop() {
      this.openCheckOwnerPop = true
      this.getList()
    },

    /**
     * 初始化数据
     */
    getList(){
      queryOwnerList(this.listQuery).then(response => {
        this.getOwnersList = response.data.records
      })
    },

    /**
     * 获取业主成员信息
     * @param ownerId
     */
    getOwnerFamilyList(ownerId){
      getOwnerFamily(ownerId).then(res => {
        this.ownerFamilyList = res.data
      })
    }

  },
  watch:{
    'listQuery.name':{
      handler(){
        this.listQuery.pageNum = 1
        this.getList()
      },
      deep:true
    },
    'listQuery.link':{
      handler(){
        this.listQuery.pageNum = 1
        this.getList()
      },
      deep:true
    },
    'listQuery.idCard':{
      handler(){
        this.listQuery.pageNum = 1
        this.getList()
      },
      deep:true
    }
  }
}
</script>

<style scoped>

</style>
